<template>
  <div>
    <Header :currentpage="a"></Header>
    <div class="banner">
        <img src="../assets/contact_us_banner.jpg" alt="">
    </div>
    <section class="aboutus">
        <h3>关于我们</h3>
        <div class="content">
            <div class="part tel">
                <div class="item"></div>
                <p>客服热线：15611433863</p>
            </div>
            <div class="part qq">
                <div class="item"></div>
                <p>客服Q Q：1036179277</p>
            </div>
            <div class="part email">
                <div class="item"></div>
                <p>公司邮箱：ptw18@foxmail.com</p>
            </div>
            <div class="part work-time">
                <div class="item"></div>
                <p>工作时间：周一至周五 9:00-18:00</p>
            </div>
        </div>
    </section>

    <Rightbtn></Rightbtn>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '@/components/header.vue'
import Footer from '@/components/footer.vue'
import Rightbtn from '@/components/rightbtn.vue'
export default {
  name: "Contact",
  data() {
    return {
      a:3
    }
  },
  components:{
    Header,
    Footer,
    Rightbtn
  }
};
</script>
<style scoped >
.banner img {
    width: 100%;
}

.aboutus {
    width: 1200px;
    height: 500px;
    margin: 50px auto;
    text-align: center;
}

.aboutus h3 {
    font-size: 28px;
    color: #333;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 50px;
    font-weight: normal;
}

.aboutus h3:after {
    content: '';
    display: inline-block;
    width: 60px;
    height: 2px;
    background-color: #ff0;
    position: absolute;
    bottom: 0;
    left: 48%;
}

.aboutus .content {
    display: flex;
    flex-wrap: wrap;
    height: 300px;
}

.aboutus .content .part {
    width: 45%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.aboutus .content .part .item {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin-right: 20px;
    background: url(../assets/home_icon1.png) no-repeat center center/450px 700px;
}

.aboutus .content .tel .item {
    background-position: -18px -607px;
}

.aboutus .content .qq .item {
    background-position: -275px -607px;
}

.aboutus .content .email .item {
    background-position: -105px -607px;
    margin-left: 76px;
}

.aboutus .content .work-time .item {
    background-position: -363px -607px;
    margin-left: 110px;
}

.aboutus .content .part p {
    color: #666;
    font-size: 22px;
}
</style>